<template>
    <div class='check-page'>
        <el-card class="left">
            <h2>体检详情</h2>
            <ul>
                <li v-for="item in data" :key="item.id" @click="getCurrentData(item)"
                    :class="{ on: item.id === currentData.id }">
                    <span>{{ item.recordDate }}-{{ item.yljgmc }}</span>
                </li>
            </ul>
        </el-card>
        <el-card class="right">
            <span v-if="!currentData.id">
                暂无数据
            </span>
            <el-card class="bottom" v-if="currentData.id">
                <el-scrollbar class="scroll-container" style=" height: calc(100vh - 90px);">
                    <div class="content" v-for="item in currentList" :key="item.id">
                        <h2>{{ item.pageName }}</h2>
                        <el-card class="box-card bottom" v-if="item.pageName === '体检报告首页'">
                            <div slot="header" class="header title clearfix">
                                <span>体检报告</span>
                            </div>
                            <el-descriptions :column="4">
                                <el-descriptions-item label="姓名">{{ item.name }}</el-descriptions-item>
                                <el-descriptions-item label="性别">{{ item.sex }}</el-descriptions-item>
                                <el-descriptions-item label="年龄">{{ item.age }}</el-descriptions-item>
                                <el-descriptions-item label="体检类型">{{ item.type }}</el-descriptions-item>
                                <el-descriptions-item label="体检套餐">{{ item.combo }}</el-descriptions-item>
                                <el-descriptions-item label="体检日期">{{ item.checkDate }}</el-descriptions-item>
                                <el-descriptions-item label="总检医生">{{ item.doctor }}</el-descriptions-item>
                                <el-descriptions-item label="总检日期">{{ item.date }}</el-descriptions-item>
                            </el-descriptions>
                            <p>总检结果：{{ item.result }}</p>
                            <p>建议：{{ item.suggest }}</p>
                        </el-card>
                        <!-- 医嘱列表  -->
                        <el-card class="box-card bottom" v-else>
                            <div slot="header" class="header list clearfix">
                                <span>项目名称：{{ item.pageName }}</span>
                                <span>科室：{{ item.departments }}</span>
                                <span>检查医生：{{ item.doctor }}</span>
                                <span>检查日期：{{ item.date }}</span>
                            </div>
                            <el-table :data="item.lists" style="width: 100%;">
                                <el-table-column prop="name" label="项目名称" width="180">
                                </el-table-column>
                                <el-table-column prop="result" label="结果">
                                </el-table-column>
                                <el-table-column prop="hint" label="提示">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.hint === '1'" style="color:#FF0000">&#x2191;</span>
                                        <span v-if="scope.row.hint === '2'" style="color:#028102">&#x2193;</span>
                                        <span v-if="scope.row.hint === '0'">无</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="normal" label="参考值">
                                </el-table-column>
                                <el-table-column prop="unit" label="单位">
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </div>
                </el-scrollbar>
            </el-card>
        </el-card>
    </div>
</template>

<script>
import { healthAPI } from '@/http'
export default {
    name: 'check-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            msg: 'check-page',
            data: [],
            currentData: {},
            currentList: [],
            typeList: ['药品', '挂号', '检查', '体检', '手术', '住院'],
        }
    },
    created() {
        this.getData()
    },
    computed: {
        sunPrice() {
            console.log('asads', this);
            return 0
        }
    },
    methods: {
        getData() {
            healthAPI.getCheckListAPI().then(res => {
                // console.log('数据：', res);
                if (res.code === 200) {
                    if (this.data.length === 0) {
                        this.data = res.data
                    }
                    console.log('住院信息', this.data);
                }
            })
        },
        getCurrentData(obj) {
            console.log('obj', obj);
            this.currentData = obj
            this.getDetail(this.currentData.id)
        },
        getDetail(id) {
            healthAPI.getCheckDetailAPI(id).then(res => {
                this.currentList = res.data
                console.log('具体住院信息', res);
            })
        }
    }
}
</script>

<style scoped lang="less">
.check-page {
    display: flex;
    height: 100vh;

    & .left {
        width: 300px;

        /deep/ .el-card__body {
            padding: 0;
        }

        h2 {
            color: #909399;
            font-family: "黑体";
            font-size: 20px;
            padding: 20px;
        }

        li {
            width: 100%;
            margin: 10px 0;
            padding: 10px 20px;
            border-bottom: 1px #ccc dotted;
            font-size: 14px;

            &:hover {
                background-color: #ECF5FF;
            }

            &.on {
                color: var(--m-c);
                background-color: #ECF5FF;
            }
        }

    }

    & .right {
        flex: 1;
        text-align: center;

        & .el-card__body>span {
            width: 100%;
            font-size: 100px;
            line-height: 100vh;
            color: #eee;
        }

        /deep/ .el-descriptions__body {
            color: #303133;
        }

        .title {
            text-align: left;
        }

        .list {
            display: flex;
            justify-content: space-between;
        }

        & h2 {
            text-align: left;
            font-size: 24px;
            color: #fff;
            background: var(--m-c);
            margin: 20px 0;
        }

        & p {
            font-size: 14px;
            color: #303133;
            text-align: left;
            padding: 10px 0;
        }
    }
}
</style>